<template>
  <div class="files">
    <div class="files-list">
      <ul>
        <li v-for="(item, index) in filesList" :key="index">
          <a href="javascript:void(0)" @click="goDetail(item.id)">{{item.title}}</a>
          <img src="@/assets/images/sysimages/7.jpg" alt="">
        </li>
      </ul>
      <pagination
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        :total="total"
        @pagination="getFilesList">
      </pagination>
    </div>
  </div>
</template>
<script>
import api from '@/api'
import Pagination from '@/components/Pagination.vue'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      filesList: [],
      query: {
        pageNum: 1,
        pageSize: 12
      },
      total: 0,
      loading: false
    }
  },
  methods: {
    getFilesList() {
      this.loading = true
      api.getContentList({...this.query, categoryId: this.currNavInfo.id}).then(res => {
        this.filesList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    goDetail(id) {
      api.getContentDetail({id}).then(res => {
        console.log(res)
        // 创建Blob对象并触发下载
        const content = res.data.content
        
        // 从链接中提取文件名和后缀
        const urlPath = content.split('/');
        const fullFileName = urlPath[urlPath.length - 1]; // 获取链接最后一部分作为文件名
        
        const blob = new Blob([content], { type: 'application/octet-stream' })
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = fullFileName || res.data.title || `文件-${id}`
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
      })
    }
  },
  watch: {
    'currNavInfo.id': {
      handler() {
        this.getFilesList()
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.files {
  width: 100%;
  height: 100%;
  .files-list {
    width: 100%;
    height: 100%;
    ul {
      li {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px dashed #dedede;
        padding: 0 0 0 20px;
        background: url(~@/assets/images/sysimages/6.jpg) no-repeat 5px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        a {
          float: left;
          font-size: 14px;
          &:hover {
            color: #365897;
          }
        }
        img {
          float: right;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
